<template>
	<el-dialog width="800px" v-model="dialogVisible" :close-on-click-modal="false" :show-close="false" center>
		<div id="pdfDom">
			<!-- pdfDom -->
			<el-descriptions class="margin-top" title="订单信息" :column="3" border>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							<el-icon ><user /></el-icon>
							收货人
						</div>
					</template>
					{{ dataForm.addressName }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							<el-icon ><iphone /></el-icon>
							手机号
						</div>
					</template>
					{{ dataForm.addressTel }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							<el-icon ><office-building /></el-icon>
							地址
						</div>
					</template>
					{{ dataForm.addressDetail }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							<el-icon ><money /></el-icon>
							总金额
						</div>
					</template>
					{{ `¥${orderAmount}` }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							<el-icon ><tickets /></el-icon>
							备注
						</div>
					</template>
					{{ dataForm.note }}
				</el-descriptions-item>
			</el-descriptions>

			<el-table :data="dataForm.orderItemList" style="width: 100%">
				<el-table-column prop="goodsName" label="商品名" width="180"></el-table-column>
				<el-table-column prop="goodsSpec" label="商品规格" width="180"></el-table-column>
				<el-table-column prop="price" label="单价"></el-table-column>
				<el-table-column prop="count" label="数量"></el-table-column>
				<el-table-column label="金额">
					<template #defalut="{ row }">
						￥{{ row.count * row.price }}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- pdfDom -->
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="handlePdf()" size="medium">下载打印</el-button>
				<el-button size="medium" @click="handleCancel()">关闭窗口</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import * as OrderAPI from '@/api/order.js';

import { ref, computed, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { Iphone, OfficeBuilding, Tickets, User ,Money} from '@element-plus/icons-vue';

const dataForm = ref({
	orderItemList: []
});
const dialogVisible = ref(false);

//计算一个订单的总金额
const orderAmount = computed(() => {
	let amount = 0;
	dataForm.value.orderItemList.forEach(item => {
		amount += item.count * item.price;
	});
	return amount.toFixed(2);
});

const init = async id => {
	dialogVisible.value = true;
	await nextTick();
	let result = await OrderAPI.getDetailById(id);
	dataForm.value = result.data; //返回数据结构详见API文档
};

const handlePdf = () => {
	ElMessage.success(`待完成...`); //TODO
};

const handleCancel = () => {
	dialogVisible.value = false;
};

//暴露接口方法
defineExpose({
	init
});
</script>

<style lang="scss" scoped>
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
